<script setup lang="ts">
import type { EvalProcessEvaData } from "@@/apis/train/type"
import type { RadarSeriesOption, SeriesOption } from "echarts/types/dist/echarts"
import type { GaugeDataItemOption } from "echarts/types/src/chart/gauge/GaugeSeries.js"
import type { RadarSeriesDataItemOption } from "echarts/types/src/chart/radar/RadarSeries.js"
import { getTaskProcessDataApi } from "@@/apis/train"
import { GaugeOptionStrategy } from "@@/components/Charts/GaugeOptionStrategy"
import { RadarOptionStrategy } from "@@/components/Charts/RadarOptionStrategy"
import { useECharts } from "@@/composables/useECharts"
import { onBeforeUnmount, onMounted, ref, watch, onActivated } from "vue"
import { useRoute } from "vue-router"


interface Props {
  taskStatus: number | undefined
  taskProcess: number | undefined
  remainingWorkerNum: number
  usedWorkerNum: number
}
const props = defineProps<Props>()
const emit = defineEmits(["update:remainingWorkerNum", "update:usedWorkerNum"])
let timer: number | null = null
const route = useRoute()
const taskId = ref<string>(route.query.id as string)
const taskStatus = ref<number | undefined>(props.taskStatus)
const AbilityElRef = ref<HTMLElement | null>(null)
const PerceptionScoutElRef = ref<HTMLElement | null>(null)
const PerceptionCoorElRef = ref<HTMLElement | null>(null)
const CognitionAutoElRef = ref<HTMLElement | null>(null)
const CognitionCoorElRef = ref<HTMLElement | null>(null)
const DecisionAssistElRef = ref<HTMLElement | null>(null)
const DecisionGameElRef = ref<HTMLElement | null>(null)
const ActionGroupElRef = ref<HTMLElement | null>(null)
const ActionCoorElRef = ref<HTMLElement | null>(null)
const DEFAULT_CHARTDATA = {
  comprehensive_ability: 0,
  perception: {
    detective: 0,
    search: 0,
    ability: 0
  },
  cognition: {
    autonomy: 0,
    cooperativity: 0,
    ability: 0
  },
  decision: {
    fire_support: 0,
    game_learning: 0,
    ability: 0
  },
  action: {
    cluster_grouping: 0,
    cooperativity: 0,
    ability: 0
  }
}
const state = ref<{
  comprehensive_ability: number
  perception: {
    detective: number
    search: number
    ability: number
  }
  cognition: {
    autonomy: number
    cooperativity: number
    ability: number
  }
  decision: {
    fire_support: number
    game_learning: number
    ability: number
  }
  action: {
    cluster_grouping: number
    cooperativity: number
    ability: number
  }
}>(DEFAULT_CHARTDATA)

// 综合能力
const AbilityChart = useECharts(
  AbilityElRef,
  new RadarOptionStrategy().getOptions({
    radar: [
      {
        indicator: [
          { text: "综合能力", max: 100 },
          { text: "感知能力", max: 100 },
          { text: "认知能力", max: 100 },
          { text: "决策能力", max: 100 },
          { text: "行动能力", max: 100 }
        ]
      }
    ],
    series: [
      {
        data: [
          {
            value: [
              state.value.comprehensive_ability,
              state.value.perception.ability,
              state.value.cognition.ability,
              state.value.decision.ability,
              state.value.action.ability
            ]
          }
        ]
      }
    ]
  })
)
// 感知 侦察能力
const PerceptionScoutChart = useECharts(
  PerceptionScoutElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "侦察能力",
            value: state.value.perception.detective
          }
        ]
      }
    ]
  })
)
// 感知 区域协同
const PerceptionCoorChart = useECharts(
  PerceptionCoorElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "区域协同搜索能力",
            value: state.value.perception.search
          }
        ]
      }
    ]
  })
)
// 认知 自主性与轮数
const CognitionAutoChart = useECharts(
  CognitionAutoElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "自主性",
            value: state.value.cognition.autonomy
          }
        ]
      }
    ]
  })
)
// 认知 协同性与轮数
const CognitionCoorChart = useECharts(
  CognitionCoorElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "协同性",
            value: state.value.cognition.cooperativity
          }
        ]
      }
    ]
  })
)
// 决策 火力支援
const DecisionAssistChart = useECharts(
  DecisionAssistElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "火力支援能力",
            value: state.value.decision.fire_support
          }
        ]
      }
    ]
  })
)
// 决策 博弈学习能力
const DecisionGameChart = useECharts(
  DecisionGameElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "博弈学习能力",
            value: state.value.decision.game_learning
          }
        ]
      }
    ]
  })
)
// 行动 集群分组能力
const ActionGroupChart = useECharts(
  ActionGroupElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "集群分组能力",
            value: state.value.action.cluster_grouping
          }
        ]
      }
    ]
  })
)
// 行动 协同性
const ActionCoorChart = useECharts(
  ActionCoorElRef,
  new GaugeOptionStrategy().getOptions({
    series: [
      {
        data: [
          {
            name: "协同性",
            value: state.value.action.cooperativity
          }
        ]
      }
    ]
  })
)
function getTaskProcessData() {
  state.value = DEFAULT_CHARTDATA
  getTaskProcessDataApi(taskId.value as string)
    .then(({ data }) => {
      data.forEach((item) => {
        const processEva: EvalProcessEvaData = JSON.parse(item.process_eval)
        state.value.comprehensive_ability = processEva.comprehensive_ability
        state.value.perception.ability = processEva.perception ? processEva.perception.ability : 0
        state.value.perception.detective = processEva.perception ? processEva.perception.detective : 0
        state.value.perception.search = processEva.perception ? processEva.perception.regional_search : 0
        state.value.cognition.autonomy = processEva.cognition ? processEva.cognition.autonomy : 0
        state.value.cognition.cooperativity = processEva.cognition ? processEva.cognition.cooperativity : 0
        state.value.cognition.ability = processEva.cognition ? processEva.cognition.ability : 0
        state.value.decision.fire_support = processEva.decision ? processEva.decision.fire_support : 0
        state.value.decision.game_learning = processEva.decision ? processEva.decision.game_learning : 0
        state.value.decision.ability = processEva.decision ? processEva.decision.ability : 0
        state.value.action.cluster_grouping = processEva.action ? processEva.action.cluster_grouping : 0
        state.value.action.cooperativity = processEva.action ? processEva.action.cooperativity : 0
        state.value.action.ability = processEva.action ? processEva.action.ability : 0

        emit("update:usedWorkerNum", item.worker_res_info.used_worker_num)
        emit("update:remainingWorkerNum", item.worker_res_info.remaining_worker_num)
      })
    })
    .finally(() => {
      // 感知能力
      PerceptionScoutChart.options.series
      && (((PerceptionScoutChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.perception.detective)
      PerceptionCoorChart.options.series
      && (((PerceptionCoorChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.perception.search)
      // 认知能力
      CognitionCoorChart.options.series
      && (((CognitionCoorChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.cognition.cooperativity)
      CognitionAutoChart.options.series
      && (((CognitionAutoChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.cognition.autonomy)
      // 决策能力
      DecisionAssistChart.options.series
      && (((DecisionAssistChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.decision.fire_support)
      DecisionGameChart.options.series
      && (((DecisionGameChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.decision.game_learning)
      // 行动能力
      ActionGroupChart.options.series
      && (((ActionGroupChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.action.cluster_grouping)
      ActionCoorChart.options.series
      && (((ActionCoorChart.options.series as SeriesOption[])[0].data as GaugeDataItemOption[])[0].value
          = state.value.action.cooperativity)
      const series = AbilityChart.options && (AbilityChart.options.series as RadarSeriesOption[])[0]
      series
      && series.data
      && ((series.data as RadarSeriesDataItemOption[])[0].value = [
        state.value.comprehensive_ability,
        state.value.perception.ability,
        state.value.cognition.ability,
        state.value.decision.ability,
        state.value.action.ability
      ])
    })
}
function resize() {
  nextTick(() => {
    PerceptionScoutChart.handleResize()
    PerceptionCoorChart.handleResize()
    CognitionAutoChart.handleResize()
    CognitionCoorChart.handleResize()
    DecisionAssistChart.handleResize()
    DecisionGameChart.handleResize()
    ActionGroupChart.handleResize()
    ActionCoorChart.handleResize()
    AbilityChart.handleResize()
  })
}

watch(
  () => props.taskStatus,
  () => {
    taskStatus.value = props.taskStatus
    if (taskStatus.value == 1) {
      getTaskProcessData()
    }
  }
)

function restart() {
  getTaskProcessData()
}

onActivated(() => {
  if (taskId.value && taskId.value !== route.query.id) {
    getTaskProcessData()
  }
})

onMounted(() => {
  getTaskProcessData()
  timer = Number(
    setInterval(() => {
      if (taskStatus.value == 1) {
        getTaskProcessData()
      }
    }, 1000 * 30)
  )
})

onBeforeUnmount(() => {
  timer && clearInterval(timer)
})

defineExpose({ resize, restart })
</script>

<template>
  <div class="title">
    <svg-icon name="eval-perception" />
    <h3>综合能力</h3>
  </div>
  <div class="content-item full">
    <div class="chart-item full">
      <div ref="AbilityElRef" class="chart-card" />
    </div>
  </div>
  <div class="title">
    <svg-icon name="eval-perception" />
    <h3>感知能力指标</h3>
  </div>
  <div class="content-item chart">
    <div class="chart-item">
      <div ref="PerceptionScoutElRef" class="chart-card" />
    </div>
    <div class="chart-item">
      <div ref="PerceptionCoorElRef" class="chart-card" />
    </div>
  </div>
  <div class="title">
    <svg-icon name="eval-cognition" />
    <h3>认知能力指标</h3>
  </div>
  <div class="content-item chart">
    <div class="chart-item">
      <div ref="CognitionAutoElRef" class="chart-card" />
    </div>
    <div class="chart-item">
      <div ref="CognitionCoorElRef" class="chart-card" />
    </div>
  </div>
  <div class="title">
    <svg-icon name="eval-decision" />
    <h3>决策能力指标</h3>
  </div>
  <div class="content-item chart">
    <div class="chart-item">
      <div ref="DecisionAssistElRef" class="chart-card" />
    </div>
    <div class="chart-item">
      <div ref="DecisionGameElRef" class="chart-card" />
    </div>
  </div>
  <div class="title">
    <svg-icon name="eval-action" />
    <h3>行动能力指标</h3>
  </div>
  <div class="content-item chart">
    <div class="chart-item">
      <div ref="ActionGroupElRef" class="chart-card" />
    </div>
    <div class="chart-item">
      <div ref="ActionCoorElRef" class="chart-card" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content-item {
  &.chart {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
.chart-item {
  width: calc(50% - (var(--main-padding) / 2 + var(--main-padding)) / 2);
  background: var(--el-bg-color);
  border-radius: 4px 4px 4px 4px;
  padding: var(--main-padding);
  height: calc(100vh / 2 - 200px);
  min-height: 500px;
  margin-right: calc(var(--main-padding) / 2);
  &.full {
    width: calc(100% - var(--main-padding) / 2);
  }
}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 42px;
  svg {
    width: 2em !important;
    height: 2em !important;
  }
  h3 {
    margin-left: 10px;
  }
}

.chart-card {
  height: calc(100%);
  width: calc(100%);
}

@media screen and (max-width: 1400px) {
  .content-item.chart {
    flex-direction: column !important;
  }
}
@media screen and (max-width: 1400px) {
  .chart-item {
    width: calc(100% - var(--main-padding) / 2) !important;
  }
  .chart-item + .chart-item {
    margin-top: var(--main-padding);
  }
}
</style>
